<template>
  <div class="wrapper"
       border-top-bottom-1px>
    <h2 class="title">{{title}}</h2>
    <div class="address">地址：{{info.address}}</div>
    <div class="icon-list">
      <div class="iconfont location"
           @click="handleMap">&#xe6fc;</div>
      <div>
        <a :href="'tel:'+info.tel">
          <i class="iconfont phone">&#xe629;</i>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailInfo',
  props: {
    title: {
      type: String,
      default: '商家信息'
    },
    info: {
      type: Object
    }
  },
  methods: {
    handleMap () {
      this.$router.push({
        path: '/map',
        query: {
          id: this.$route.params.id,
          address: this.info.address
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  margin-top 14px
  background-color $bgcWh
  padding()
  padding-top 14px
  padding-bottom 20px

  .title
    font-size $fzThird
    color $fzColor
    line-height 65px

  .address
    font-size $smallFz
    color $fzColor
    line-height 60px

  .icon-list
    display flex
    justify-content flex-end
    line-height 64px

    .location
      font-size 50px
      color $graySecond

    .phone
      font-size $fzOne
      color $graySecond

    .location
      margin-right 70px
</style>
